<template>
  <div class="index">
    <!-- 背景图和搜索 -->
    <div class="wrap">
      <van-sticky @change="changeColor">
        <van-search v-model="value" placeholder="搜索话题或专家姓名" />
        <img class="img1" src="../../assets/img/index/22.png" />
      </van-sticky>
    </div>
    <!-- 图标 -->
    <div class="ge">
      <ul class="list">
        <li class="list-1">
          <img src="../../assets/img/index/1.png" alt="" />
          <p>心里健康</p>
        </li>
        <li class="list-1">
          <img src="../../assets/img/index/2.png" alt="" />
          <p>婚姻家庭</p>
        </li>
        <li class="list-1">
          <img src="../../assets/img/index/3.png" alt="" />
          <p>亲子教育</p>
        </li>
        <li class="list-1">
          <img src="../../assets/img/index/4.png" alt="" />
          <p>情绪压力</p>
        </li>
        <li class="list-1">
          <img src="../../assets/img/index/5.png" alt="" />
          <p>人际关系</p>
        </li>
        <li class="list-1">
          <img src="../../assets/img/index/6.png" alt="" />
          <p>职业发展</p>
        </li>
        <li class="list-1">
          <img src="../../assets/img/index/7.png" alt="" />
          <p>个人成长</p>
        </li>
        <li class="list-1">
          <img src="../../assets/img/index/8.png" alt="" />
          <p>恋爱情感</p>
        </li>
        <li class="list-1">
          <img src="../../assets/img/index/9.png" alt="" />
          <p>法律咨询</p>
        </li>
        <li class="list-1">
          <img src="../../assets/img/index/10.png" alt="" />
          <p>全部</p>
        </li>
      </ul>
    </div>
    <div class="ge2">
      <ul class="list-2">
        <li>
          <img src="../../assets/img/index/co4.png" alt="" />
        </li>
        <li>
          <img src="../../assets/img/index/co3.png" alt="" />
        </li>
        <li>
          <img src="../../assets/img/index/co1.png" alt="" />
        </li>
        <li>
          <img src="../../assets/img/index/co2.png" alt="" />
        </li>
      </ul>
    </div>
    <!-- 咨询·解惑 -->
    <div class="ge3">
      <p><strong>咨询·解惑</strong></p>
      <router-link to="/home/consult">更多<em>></em></router-link>
    </div>
    <!-- 咨询解惑选项卡 -->
    <div class="tab1">
      <van-tabs
        v-model:active="active"
        color="transparent"
        title-active-color="#2E2E2E"
      >
        <van-tab v-for="(item, index) in titlearr" :title="item" :key="index">
          <ul class="xuan1" v-if="consultdata">
            <li
              v-for="(item, index) in arr1"
              :key="index"
              @click="jumpdetail(item.id)"
            >
              <img class="shenlan" :src="item.img" alt="" />
              <div class="xbox_right">
                <p class="mp">
                  <em>{{ item.name }}</em
                  ><img src="../../assets/img/index/z2.png" alt="" />
                </p>
                <p>
                  <i>恋爱</i>
                  <i>亲子压力</i>
                  <i>情绪压力</i>
                </p>
                <p>
                  <span>咨询次数{{ item.assistance }}</span>
                  <span>好评率{{ item.evaluate }}</span>
                </p>
                <p>
                  <b>￥{{ item.price }}</b
                  >起
                </p>
              </div>
              <img class="pos1" src="../../assets/img/index/pos1.png" alt="" />
            </li>
          </ul>
        </van-tab>
      </van-tabs>
    </div>
    <!-- 学习·成长 -->
    <div class="grow">
      <div class="ge4">
        <p><strong>学习·成长</strong></p>
        <router-link to="/class">更多<em>></em></router-link>
      </div>
      <ul class="x_grow" v-if="indexData">
        <router-link to="/class">
          <li v-for="(item, index) in indexData[1].two" :key="index">
            <img :src="item.img" alt="" />
            <div class="xgo_right">
              <h3>{{ item.title }}</h3>
              <div class="xgo_bot">
                <span class="span1"
                  ><strong>{{ item.price }}</strong
                  >壹贝</span
                >
                <span class="span2">{{ item.good }}人气</span>
              </div>
            </div>
          </li>
        </router-link>
      </ul>
    </div>
    <!-- 倾诉·排解 -->
    <div class="pai">
      <div class="ge5">
        <p><strong>倾诉·排解</strong></p>
        <router-link to="/talking">更多<em>></em></router-link>
      </div>
      <div class="tab1">
        <van-tabs
          v-model:active="active"
          color="transparent"
          title-active-color="#2E2E2E"
        >
          <van-tab v-for="(item, index) in titlearr" :title="item" :key="index">
            <!-- 倾诉排解渲染 -->
            <ul class="xuan2" v-if="indexData">
              <li
                v-for="(item, index) in indexData[2].there.slice(0, 1)"
                :key="index"
              >
                <img class="zhou" :src="item.img" alt="" />
                <div class="xbox_right">
                  <p class="mp">
                    <em>{{ item.name }}</em
                    ><img src="../../assets/img/index/z2.png" alt="" />
                  </p>
                  <p>
                    <i>{{ item.type[0] }}</i>
                    <i>{{ item.type[1] }}</i>
                    <i>{{ item.type[2] }}</i>
                  </p>
                  <p>
                    <span>{{ item.cznx }}人向他倾诉</span>
                    <span>{{ item.evaluate }}接通率</span>
                  </p>
                  <p class="p_bot">
                    <b>￥{{ item.price }}</b
                    >/次&nbsp;<span>原价50元</span><i>立减¥50.00</i>
                  </p>
                </div>
                <img
                  class="pos2"
                  src="../../assets/img/index/talking.png"
                  alt=""
                />
              </li>

              <li>
                <img
                  class="zhou"
                  src="../../assets/img/index/zhouxiu.png"
                  alt=""
                />
                <div class="xbox_right">
                  <p class="mp">
                    <em>周秀花</em
                    ><img src="../../assets/img/index/z2.png" alt="" />
                  </p>
                  <p>
                    <i>婚姻家庭</i>
                    <i>情绪能力</i>
                  </p>
                  <p>
                    <span>32人向他倾诉</span>
                    <span>100%接通率</span>
                  </p>
                  <p class="p_bot">
                    <b>￥500</b>/次&nbsp;<span>原价50元</span><i>立减¥50.00</i>
                  </p>
                </div>
                <img
                  class="pos2"
                  src="../../assets/img/index/talking2.png"
                  alt=""
                />
              </li>
            </ul>
          </van-tab>
        </van-tabs>
      </div>
      <!-- 测试·分析-->
      <div class="test">
        <div class="ge6">
          <p><strong>测试·分析</strong></p>
          <router-link to="/test">更多<em>></em></router-link>
        </div>
        <img src="../../assets/img/index/test.png" alt="" />
        <ul v-if="indexData">
          <li v-for="(item, index) in indexData[3].four" :key="index">
            <img :src="item.img" alt="" />
            <div class="xian">
              <div class="ce">
                <h3>{{ item.title }}</h3>
                <p>{{ item.yc }}人已测</p>
              </div>
              <span @click="tiaoce">去测试</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 解忧问答 -->
    <div class="ge7">
      <p><strong>解忧·问答</strong></p>
      <router-link to="/home/questions">更多<em>></em></router-link>
    </div>
    <!-- 解忧问答渲染 -->
    <div class="talkbox" v-if="indexData">
      <router-link to="/home/questions">
        <div
          class="talk"
          v-for="(item, index) in indexData[4].five"
          :key="index"
        >
          <div class="t1">
            <img src="../../assets/img/index/z1.png" alt="" />
            <div class="t1_2">
              <p>{{ item.username }}</p>
              <i>{{ item.port }}</i>
            </div>
          </div>
          <div class="t2">
            <h3>{{ item.title }}</h3>
          </div>
          <div class="t3">
            <p>
              {{ item.issue }}
            </p>
          </div>
          <img src="../../assets/img/index/wang.png" alt="" />
          <div class="t4">
            <p class="p1"><span>#</span>{{ item.gambit }}</p>
            <p class="p2">
              <img src="../../assets/img/index/x2.png" alt="" /><em>{{
                item.comment
              }}</em>
            </p>
            <p class="p3">
              <img src="../../assets/img/index/x3.png" alt="" /><em>{{
                item.prasie
              }}</em>
            </p>
          </div>
        </div>
      </router-link>
    </div>
    <!-- 助眠冥想 -->
    <div class="ge8">
      <p><strong>助眠·冥想</strong></p>
      <a>更多<em>></em></a>
    </div>
    <div class="sleep">
      <div class="sleep1">
        <img src="../../assets/img/index/s1.png" alt="" />
        <img src="../../assets/img/index/s2.png" alt="" />
        <img src="../../assets/img/index/s3.png" alt="" />
        <img src="../../assets/img/index/s4.png" alt="" />
      </div>
      <div class="sleep2">
        <img src="../../assets/img/index/s11.png" alt="" />
        <img src="../../assets/img/index/s12.png" alt="" />
        <img src="../../assets/img/index/s13.png" alt="" />
        <img src="../../assets/img/index/s14.png" alt="" />
      </div>
    </div>
    <!-- 心灵电台 -->
    <div class="ge9">
      <p><strong>心灵·电台</strong></p>
      <router-link to="/radio">更多<em>></em></router-link>
    </div>
    <div class="heart">
      <img src="../../assets/img/index/a1.png" alt="" />
      <div class="heart2">
        <ul v-if="indexData">
          <li v-for="(item, index) in indexData[5].six" :key="index">
            <div class="play">
              <p><img src="../../assets/img/index/a3.png" alt="" /></p>
              <router-link to="/radio">{{ item.title }}</router-link>
            </div>
            <span>{{ item.dyl }}&nbsp;🎧</span>
          </li>
        </ul>
      </div>
    </div>
    <!-- 文章·阅读 -->
    <div class="ge10">
      <p><strong>文章·阅读</strong></p>
      <router-link to="/article">更多<em>></em></router-link>
    </div>
    <ul class="read" v-if="indexData">
      <router-link to="/article">
        <li v-for="(item, index) in indexData[6].seven" :key="index">
          <div class="read_main">
            <div class="read_left">
              <h3>{{ item.title }}</h3>
              <p>
                {{ item.info }}
              </p>
            </div>
            <img :src="item.img" alt="" />
          </div>
          <div class="read_bottom">
            <p class="r1">
              <img src="../../assets/img/index/r1.png" alt="" /> {{ item.name }}
            </p>
            <div class="dianzan">
              <p class="r2">
                <em> {{ item.sc }}</em
                >点赞
              </p>
              <p class="r3">
                <em> {{ item.yd }}</em
                >浏览
              </p>
            </div>
          </div>
        </li>
      </router-link>
    </ul>
    <div class="botimg">
      <img src="../../assets/img/index/bo1.png" alt="" />
    </div>
  </div>
</template>

<script>
import { ref, computed, onMounted } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
export default {
  setup() {
    const router = useRouter();
    const value = ref("");
    const titlearr = [
      "恋爱情感",
      "婚姻家庭",
      "亲子教育",
      "人际社交",
      "职场发展",
      "情绪压力",
    ];
    let flag = true;
    const changeColor = () => {
      flag = !flag;
      if (flag) {
        document.querySelector(".index .wrap .van-search").style.background =
          "transparent";
      } else {
        document.querySelector(".index .wrap .van-search").style.background =
          "#fd3";
      }
    };
    const active = ref(0);
    const store = useStore();
    const indexData = computed(() => store.state.index.res);
    const fn = () => store.dispatch("getIndexAsync");

    const tiaoce = () => {
      router.push("/test");
    };

    // 咨询渲染
    const start = ref(0);
    const end = ref(2);
    let consultdata = computed(() => store.state.consult.consultdata);

    const arr1 = computed(() => {
      return typeof consultdata.value === "object"
        ? consultdata.value.slice(start.value, end.value)
        : null;
    });

    const zixun = () => {
      store.dispatch("getconsultdaasync");
    };

    const jumpdetail = (i) => {
      router.push("/detail/" + i);
    };

    onMounted(() => {
      fn();
      zixun();
      // console.log(consultdata.value);
      // console.log(arr1);
    });

    return {
      value,
      titlearr,
      active,
      indexData,
      fn,
      router,
      tiaoce,
      zixun,
      consultdata,
      arr1,
      jumpdetail,
      start,
      end,
      changeColor,
      // flag,
    };
  },
};
</script>
<style lang="less">
.index {
  background: #fff;
  //背景图和搜索
  .wrap {
    width: 100%;
    height: 250px;
    background: url(../../assets/img/index/17.png) no-repeat;

    .van-search__content {
      // width: 54px;
      // height: 27px;
      border-radius: 30px;
      background-color: #fff;
    }
    .van-search {
      background: rgba(255, 255, 255, 0.5);
      position: relative;
      // display: block;
      width: 100%;
      height: 53px;
    }
    .van-field__control {
      color: #999999;
    }
    .img1 {
      position: absolute;
      top: 15px;
      left: 330px;
      width: 22px;
      height: 22px;
    }
  }
  //图标1
  .ge {
    .list {
      display: flex;
      justify-content: space-around;
      align-items: center;
      flex-wrap: wrap;
      margin: 13px 13px 0px 13px;
      li {
        width: 20%;
        margin-bottom: 14px;
        text-align: center;
        img {
          width: 36px;
          height: 36px;
        }
      }
    }
  }
  //图标2
  .ge2 {
    .list-2 {
      display: flex;
      justify-content: center;
    }
  }
  //标题
  .ge3,
  .ge4,
  .ge5,
  .ge6,
  .ge7,
  .ge8,
  .ge9,
  .ge10 {
    height: 21px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
    padding: 0 14px;
    p {
      width: 100px;
      height: 21px;
      font-size: 22px;
      font-weight: bold;
      color: #2e2e2e;
      position: relative;
      strong {
        position: absolute;
        z-index: 10;
      }

      &::after {
        content: "";
        display: block;
        width: 98px;
        height: 6px;
        background: #2bb0f4;
        position: absolute;
        top: 16px;
        z-index: 1;
      }
    }
    a {
      width: 54px;
      line-height: 18px;
      border: 2px solid #e4e4e4;
      border-radius: 11px;
      font-weight: bold;
      background: #fff;
      text-align: center;
      em {
        width: 6px;
        height: 11px;
      }
    }
  }
  // 咨询解惑
  .tab1 {
    margin-top: 20px;
    width: 100%;
    height: auto;
    padding-left: 15px;
    .van-tabs__wrap {
      margin-left: -20px;
    }
    .van-tab {
      color: #636363;
    }
    .van-tab--active {
      font-size: 16px;
      font-weight: bold;
    }
    .xuan1 {
      width: 350px;
      height: 100%;

      li {
        height: 100px;
        width: 100%;
        display: flex;
        border-bottom: 1px solid #efefef;
        position: relative;
        .shenlan {
          width: 64px;
          height: 64px;
          margin-top: 10px;
          border-radius: 50%;
        }
        .xbox_right {
          height: 90px;
          width: 170px;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          margin: 5px 15px;
          .mp {
            em {
              font-size: 15px;
              font-weight: bold;
              color: #2e2e2e;
              line-height: 15px;
              vertical-align: middle;
            }
            img {
              vertical-align: middle;
            }
          }
          p {
            font-size: 10px;
            i {
              width: 45px;
              height: 14px;
              background: #f7f7f7;
              border-radius: 2px;
              font-size: 9px;
              margin-right: 5px;
            }
            span {
              width: 68px;
              height: 10px;
              font-size: 10px;
              font-weight: 400;
              color: #606060;
              margin-right: 5px;
            }
            b {
              width: 26px;
              height: 12px;
              font-size: 17px;
              font-weight: bold;
              color: #fd4030;
            }
          }
        }
        .pos1 {
          width: 45px;
          height: 45px;
          position: absolute;
          right: 11px;
          top: 25px;
        }
      }
    }
  }
  // 学习成长
  .x_grow {
    width: 350px;
    height: 100%;
    li {
      width: 350px;
      height: 90px;
      border: 1px solid #f3f3f3;
      box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.1);
      border-radius: 10px;
      display: flex;
      margin: 0 13px 14px 13px;
      img {
        margin-left: 10px;
      }
      .xgo_right {
        width: 200px;
        height: 80px;
        margin-right: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        h3 {
          font-size: 15px;
          font-family: PingFang;
          line-height: 24px;
          color: #141414;
        }
        .xgo_bot {
          width: 200px;
          height: 16px;
          display: flex;
          justify-content: space-between;
          vertical-align: middle;
          .span1 {
            color: #fe4c42;
            vertical-align: middle;
            strong {
              font-size: 15px;
              color: #fe4c42;
            }
          }
          .span2 {
            vertical-align: middle;
            padding-top: 2px;
          }
        }
      }
    }
  }
  // 倾诉排解渲染
  .xuan2 {
    width: 350px;
    height: 100%;

    li {
      height: 100px;
      width: 100%;
      display: flex;
      border-bottom: 1px solid #efefef;
      position: relative;

      .zhou {
        width: 64px;
        height: 64px;
        margin-top: 10px;
      }
      .xbox_right {
        height: 90px;
        width: 170px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        margin: 5px 15px;
        padding-bottom: 10px;
        .mp {
          em {
            font-size: 15px;
            font-weight: bold;
            color: #2e2e2e;
            line-height: 15px;
            vertical-align: middle;
          }
          img {
            vertical-align: middle;
          }
        }
        .p_bot {
          width: 200px;
          height: 10px;
          display: flex;
          justify-content: space-around;
          span {
            width: 50px;
            height: 10px;
            font-size: 10px;
            font-weight: 200;
            text-decoration: line-through;
            color: #606060;
          }
          i {
            width: 63px;
            height: 14px;
            background: #fff5f4;
            border: 1px solid #fec3bd;
            border-radius: 7px;
            color: #ff5a50;
          }
        }
        p {
          font-size: 10px;
          i {
            width: 45px;
            height: 14px;
            background: #f7f7f7;
            border-radius: 2px;
            font-size: 9px;
            margin-right: 5px;
          }
          span {
            width: 68px;
            height: 10px;
            font-size: 10px;
            font-weight: 400;
            color: #606060;
            margin-right: 5px;
          }
          b {
            width: 45px;
            height: 12px;
            line-height: 12px;
            font-size: 17px;
            font-weight: bold;
            color: #fd4030;
          }
        }
      }
      .pos2 {
        width: 42px;
        height: 42px;
        position: absolute;
        right: 11px;
        top: 25px;
      }
    }
  }
  // 测试分析
  .test {
    width: 360px;
    height: 100%;
    img {
      margin-left: 14px;
    }
    ul {
      width: 100%;
      height: auto;
      margin-left: 2px;

      li {
        line-height: 50px;
        width: 100%;
        height: 80px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: soild 1px;
        .xian {
          width: 273px;
          height: 80px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          border-bottom: solid 1px #efefef;
          .ce {
            width: 210px;
            height: 75px;
            display: flex;
            margin-top: 6px;
            flex-direction: column;
            justify-content: space-around;
            h3 {
              height: 10px;
              line-height: 25px;
              font-size: 14px;
              font-weight: bold;
              color: #111520;
            }
            p {
              line-height: 35px;
              font-size: 10px;
              color: #111520;
              text-align: left;
              margin-left: 12px;
            }
          }
          span {
            width: 68px;
            height: 23px;
            font-size: 12px;
            font-weight: bold;
            color: #231e22;
            background: #ffdd33;
            border-radius: 11px;
            display: block;
            line-height: 23px;
            text-align: center;
            cursor: pointer;
          }
        }
      }
    }
  }
  //解忧问答
  .talkbox {
    width: 350px;
    height: 100%;
    .talk {
      width: 348px;
      height: 282px;
      background: #ffffff;
      border: 1px solid #efefef;
      border-radius: 10px;
      margin: 15px 14px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .t1 {
        height: 33px;
        width: 150px;
        display: flex;
        margin: 13px 17px;
        img {
          width: 33px;
          height: 32px;
          margin-right: 3px;
        }
        .t1_2 {
          width: 110px;
          height: 30px;
          display: flex;
          flex-direction: column;
          text-align: left;
          p {
            font-weight: bold;
          }
          i {
            color: #a8a8a8;
          }
        }
      }
      .t2 {
        width: 150px;
        height: 16px;
        margin-left: 13px;
        h3 {
          font-size: 17px;
          font-weight: bold;
          color: #231e22;
        }
      }
      .t3 {
        width: 100%;
        height: 50px;
        margin-left: 12px;

        p {
          font-weight: 400;
          color: #575757;
          width: 325px;
          font-size: 12px;
          line-height: 16px;
        }
      }
      .t4 {
        width: 100%;
        height: 25px;
        display: flex;
        margin-left: 13px;
        .p1 {
          width: 60%;
          height: 21px;
          font-weight: bold;
          span {
            // width: 30px;
            // height: 30px;
            font-size: 12px;

            color: #feffff;
            background: url(../../assets/img/index/x1.png);
          }
        }
        .p2,
        .p3 {
          width: 20%;
        }
      }
    }
  }
  // 助眠冥想
  .sleep {
    width: 360px;
    // height: 250px;
    margin: 0 auto;
    padding-bottom: 20px;
    .sleep1 {
      width: 360px;
      height: 170px;
      margin-bottom: 10px;
      img {
        width: 50%;
      }
    }
    .sleep2 {
      width: 360px;
      height: 80px;
      display: flex;
      justify-content: space-between;
    }
  }
  //心灵电台
  .heart {
    width: 350px;
    height: 300px;
    margin-left: 10px;
    margin-bottom: 35px;
    .heart2 {
      width: 350px;
      height: 150px;
      border: 1px solid #efefef;
      border-radius: 10px;
      box-shadow: 0 5px #e7e7e7;
      ul {
        width: 350px;
        height: 150px;
        li {
          width: 100%;

          height: 50px;
          display: flex;
          justify-content: center;

          .play {
            width: 250px;
            height: 50px;
            line-height: 50px;
            display: flex;
            align-items: center;

            align-content: center;
            img {
              vertical-align: middle;

              line-height: 50px;
            }
            a {
              font-size: 15px;
              font-weight: bold;
              color: #1a1a1a;
              vertical-align: top;
            }
          }

          span {
            width: 60px;
            line-height: 25px;
            font-size: 10px;
            font-weight: 400;
            color: #979797;
            display: block;
            align-self: center;
            text-align: center;
          }
        }
      }
    }
  }
  //文章阅读
  .read {
    width: 360px;
    height: 100%;
    margin: 0px 12px;
    li:nth-last-child(1) {
      border-bottom: none;
    }
    li {
      width: 360px;
      height: 150px;
      border-bottom: 1px solid #efefef;

      .read_main {
        width: 360px;
        height: 120px;
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        padding-top: 5px;
      }
      .read_left {
        height: 100px;
        width: 220px;

        h3 {
          line-height: 18px;
          font-size: 16px;
          font-weight: bold;
          color: #231e22;
        }
        p {
          margin-top: 12px;
          width: 219px;
          height: 30px;
          font-size: 12px;
          font-weight: bold;
          color: #2e2e2e;
          line-height: 18px;
        }
      }
      img {
        width: 120px;
        height: 85px;
        margin-right: 6px;
      }
      .read_bottom {
        width: 360px;
        height: 12px;

        display: flex;
        justify-content: space-between;
        .dianzan {
          height: 100%;
          width: 100px;
          margin-right: 12px;
          display: flex;
          justify-content: space-between;
          color: #2e2e2e;
        }
        img {
          width: 12px;
          height: 12px;
        }
      }
    }
  }
  .botimg {
    padding-bottom: 90px;
    img {
      margin-bottom: 10px;
    }
  }
}
</style>
